<template>
	<div id="shortUrl">
		<search :selectedList='selectedList' :total='total'  @delete='deleteWebSite' @search='searchImg' title='网址'>
			<el-button type="primary"  slot='btn' @click='openDrawer(1)'>生成网址</el-button>
			<template slot='txt'>
				<el-input v-model="searchValue" @keydown.enter.native='searchImg' placeholder="请输入网址备注" clearable></el-input>
			</template>
		</search>
  		<tableList 
			:tableData="tableData" 
			:tableHeader="tableHeader"  
			:total='total'
			:page='page' 
			:loading="loading" 
			@selectionChange='handleSelectionChange'
			@changePage='handleCurrentChange'
			@copyText='copyText'>
		</tableList>
		<el-drawer
		    class='imgDrawer'
		    size='53%'
		    :title="drawerTitle"
		    :visible.sync="drawer"
		    :append-to-body='true'	
		    :direction="direction">
		 	<sUrl ref='sUrl' @closeDialog='drawer=false' v-if='drawerTitle=="生成短网址"' @getData='getWebSite(page)'></sUrl>
		 	<div class='urlDetail' v-else>
		 		<input id="copyCon" type="text" style="position: absolute;opacity: 0;z-index:-1;"/>
		 		<p>
		 			<label>网<i class='marginHalf'></i>址<i class='marginHalf'></i>id：</label>
		 			<span>{{drawerData.id}}</span>
		 		</p>
		 		<p>
		 			<label>短<i class='marginHalf'></i>网<i class='marginHalf'></i>址：</label>
		 			<el-tooltip effect="dark" content="单击复制网址" placement="right">
						<span class='isUrl' @click='copy($event)'>{{drawerData.shortUrl}}</span>
						</el-input>
					</el-tooltip>
		 		</p>
		 		<p>
		 			<label>原<i class='marginHalf'></i>网<i class='marginHalf'></i>址：</label>
		 			<el-tooltip effect="dark" content="单击复制网址" placement="right">
						<span class='isUrl' @click='copy($event)'>{{drawerData.url}}</span>
						</el-input>
					</el-tooltip>
		 		</p>
		 		<p>
		 			<label>网址备注：</label>
		 			<span>{{drawerData.note}}</span>
		 		</p>
		 		<p>
		 			<label>生成时间：</label>
		 			<span>{{drawerData.create_time}}</span>
		 		</p>
		 		<p>
		 			<label>修改时间：</label>
		 			<span>{{drawerData.create_time}}</span>
		 		</p>
		 		<br>
		 		<el-button plain @click='drawer=false;'>关 闭</el-button>
		 	</div>
		</el-drawer>
	</div>
</template>
<script>
	import search from '@/components/search'
	import tableList from '@/components/tableList'
	import shortUrl from '@/components/shortUrl'
	import {api} from '@/api/public'
	export default {
	name:'shortUrl',
	data(){
		return {
			tableData: [],	
			loading:true,
			imgCount:0,
			total:0,
			privateTotal:0,
	        loading:true,
	        delVisible:false,
	        searchValue:'',
	        selectedList:[],
	        page:1,
	        drawer: false,
	        drawerTitle:'',
	        drawerData:'',
        	direction: 'rtl',
			tableHeader:[
				{ prop: 'id', label: '网址Id', width: '80px' },
				{ prop: 'shortUrl', label: '短网址',width:"260px",isLink:true,title:'点我预览图片' },
				{ prop: 'url', label: '原网址',isLink:true,title:'点我预览图片' },
				{ prop: 'note', label: '网址备注',width:'200px',isText:true},
				// { prop: 'username', label: '上传用户',width:'200px'},
				{ prop: 'create_time', label: '生成时间',width:'110px'},
				// { prop: 'url', label: '图片地址',minWidth: '140px',isCopy:true},
				{ prop: 'oper', label: '操作', fixed: 'right',width:'140px',
					oper: [
						{ name: '查看',clickFun:this.openDrawer},
						{ name: '编辑',clickFun:this.editNote},
						{ name: '删除',clickFun:this.deleteWebSite}
					]
				}
			]
		}
	}, 
	watch:{
		drawer(val){
			if(!val) this.$refs.sUrl.url=this.$refs.sUrl.note=this.$refs.sUrl.shortUrl='';
		}
	},
    methods: {
    	copy(This){
    		let text=This.target.innerText;
    		copyCon.value=text;
    		copyCon.select();
    		document.execCommand("Copy");
    		this.info('复制成功~~~');
    	},
        openDrawer(row) {
        	this.drawerTitle=row===1?'生成短网址':'查看详情';
        	this.drawer=true;
        	this.drawerData=row;
        	console.log(row);
      	},
        deleteWebSite(item,index,tableData) {
        	this.$confirm('你确定要删除短网址吗？')
	        .then(async res => {
	        	let ids;
	        	if(index!==undefined) ids=[item.id];
        		else{
					ids=this.selectedList.map((item)=>{ return item.id; })  
				}
				let routerName=this.$route.name;
	    		let {success}=await api('delete','website',-1,{id:ids});
	        	if(success){
	        		this.info('短网址删除成功~~~');
	        		this.imgCount--;
	        		this.$bus.$emit('imgCount');
				    if(this.imgCount===0){
	        			tableData=[];
	        			return;
	        		}
	        		let page=this.page;
	        		if((this.imgCount/10)==page-1) this.page--;
	        		this.getWebSite(this.page);
	        	}
	        	else this.info('短网址删除失败~~~','e');
	        }).catch(res => {});	
      	},
      	handleSelectionChange(val) {	
			this.selectedList=val;
      	},
      	handleCurrentChange(page) {
      		this.page=page;
        	this.getWebSite(page);
      	},
      	copyText(This){
      		This.target.select();
      		document.execCommand("Copy");
      		this.info('网址复制成功');
      	},
	    async getWebSite(page){
	    	let {result,count}=await api('get','website',-1,{note:this.searchValue,page:page});
	    	if(result.length===0) this.page=1;
		    this.tableData=result;
		    this.total=count;
		    setTimeout(()=>{
		    	this.loading=false;
		    },500);	
	    },
	    searchImg(){
	    	sessionStorage.setItem('searchValue',this.searchValue);
	    	sessionStorage.setItem('isPrivate',this.searchSwitch);
	    	this.handleCurrentChange(1);
	    },
	    async editNote(row,index,tableData){
	    	if(row.note=='') this.info('网址备注为空~~~','w');
	    	else{
		    	let {success}=await api('put','website',-1,{id:row.id,note:row.note});
	    		if(success) this.info('网址备注修改成功~~~');
	    		else this.info('网址备注修改失败~~~','e');
	    	}   	
	    },
	    initStorage(){
    		this.loading=true;
	    	sessionStorage.setItem('searchValue','');
    		sessionStorage.setItem('isPrivate',0);
	    }
    },
    created(){
    	this.initStorage();
    	this.getWebSite(this.page);
    	this.$bus.$on('changeName',(value)=>{
			this.tableData.forEach(item=>{
				item.name=value;
			})
		})
		this.$bus.$on('changeAvator',(newAvator)=>{
            this.getWebSite(this.page);
        })
    },
    beforeDestroy(){
    	sessionStorage.removeItem('searchValue');
    	sessionStorage.removeItem('isPrivate',0);
    },
    components:{
    	'sUrl':shortUrl,tableList,search
    }
}
</script>
<style scoped lang='stylus'>
	#shortUrl {
		>>> .el-image-viewer__close {
			top:50px;
			right: 50px;
			color:red;
			width: 50px;
			height:50px;
		}
		>>> .el-image-viewer__close>i{
			font-size: 50px;
		}
		>>>.el-image{
			&.img{
				>img{
					max-width:85%;
					width: auto;
    				height: auto;
				}
			}
		}
		
	}
</style>
<style lang='stylus'>
	.el-drawer__wrapper{
		.urlDetail{
			width: 84%;
    		margin: 0 auto;
    		margin-top:8em;
    		>p{
    			display:flex;
    			align-items:center;
    			margin:2em 0;
    			>label{
    				width:12%;
    				display:inline-block;
    			}
    			>span{
    				max-width:80%;
    				word-break:break-all;
    				&.isUrl{
    					cursor:pointer;
    					transition:.18s;
    					&:hover{
							transform:scale(1.05);
    					}
    				}
    			}
			}
			.el-button{
				width:70%;
				display:block;
				margin:0 auto;
			}
		}
	}
</style>